/* Default / Light Theme */ :root, [data-theme="light"] { --jsol-bg: #f4f5f7; --jsol-surface: #ffffff; --jsol-text: #333333; --jsol-text-muted: #777777; --jsol-accent: #2b7bc4; --jsol-accent-input: #e6a200; --jsol-input-bg: #fffbdd; --jsol-input-text: #000000; --jsol-border: #cccccc; --jsol-success: #28a745; --jsol-error: #dc3545; --jsol-error-bg: #ffe6e6; --jsol-error-text: #cc0000; --jsol-dim: rgba(0, 0, 0, 0.04); --jsol-dim-strong: rgba(0, 0, 0, 0.08); --jsol-border-dim: rgba(0, 0, 0, 0.1); } /* Dark Theme (Nestable on any container) */ [data-theme="dark"] { --jsol-bg: #1e1e1e; --jsol-surface: #2d2d2d; --jsol-text: #e0e0e0; --jsol-text-muted: #888888; /* --jsol-accent: #4a90e2; */ --jsol-accent: oklch(0.75 0.23 250 / 1); --jsol-accent-input: #f1c40f; --jsol-input-bg: #fffbdd; --jsol-input-text: #000000; --jsol-border: #444444; --jsol-success: #50c878; --jsol-error: #ff4c4c; --jsol-error-bg: #3b1515; --jsol-error-text: #ffcccc; --jsol-dim: rgba(0, 0, 0, 0.2); --jsol-dim-strong: rgba(0, 0, 0, 0.3); --jsol-border-dim: rgba(255, 255, 255, 0.1); } .jsol-repl-container { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; background: var(--jsol-bg); color: var(--jsol-text); display: flex; height: 100%; /* Fluido para poder ser embebido y llenar cualquier contenedor */ overflow: hidden; /* Aislamiento estricto contra contaminación de cascada desde el framework j0ui */ --j0ui-text-main: var(--jsol-text); --j0ui-text-muted: var(--jsol-text-muted); --j0ui-text-accent: var(--jsol-accent); } /* Regla exclusiva para Standalone: Si el container es el , toma el viewport exacto (fix iOS Mobile Safari 100vh) */ body.jsol-repl-container { height: 100dvh; width: 100vw; } .jsol-repl-container H2 code{ background-color:var(--jsol-surface); } .jsol-repl-sidebar { width: 280px; background: var(--jsol-surface); border-right: 1px solid var(--jsol-border); overflow-y: auto; padding: 1rem; box-sizing: border-box; } .jsol-repl-file-list { list-style: none; padding: 0; margin: 0; } .jsol-repl-link { display: block; padding: 0.5rem; color: var(--jsol-text-muted); text-decoration: none; border-radius: 4px; margin-bottom: 0.25rem; word-break: break-all; font-size: 0.9rem; } .jsol-repl-link:hover { background: var(--jsol-border); color: var(--jsol-text); } .jsol-repl-link[data-active="true"] { background: var(--jsol-accent); color: #fff; font-weight: bold; } .jsol-repl-mobile-select { display: none; } .jsol-repl-main { flex: 1; padding: 2rem; overflow-y: auto; box-sizing: border-box; } .jsol-repl-table-wrap { background: var(--jsol-surface); border: 1px solid var(--jsol-border); border-radius: 6px; overflow: auto; margin-top: 1rem; } .jsol-repl-actions { margin-top: 0.75rem; display: flex; align-items: center; } .jsol-repl-btn-add { background: var(--jsol-surface); color: var(--jsol-text-muted); border: 1px solid var(--jsol-border); padding: 0.4rem 0.85rem; border-radius: 20px; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s, color 0.2s; } .jsol-repl-btn-add:hover { background: var(--jsol-border); color: var(--jsol-text); } .jsol-repl-btn-add kbd { background: var(--jsol-dim-strong); padding: 0.15rem 0.35rem; border-radius: 3px; font-family: monospace; font-size: 0.75rem; border: 1px solid var(--jsol-border-dim); } .jsol-repl-grid { width: 100%; border-collapse: collapse; text-align: left; } .jsol-repl-grid th, .jsol-repl-grid td { padding: 0.75rem; border-bottom: 1px solid var(--jsol-border); border-right: 1px solid var(--jsol-border); } .jsol-repl-grid th { background: var(--jsol-dim); font-size: 0.85rem; font-family: monospace; } .jsol-repl-grid th small { text-transform: uppercase; font-family: system-ui, sans-serif; color: var(--jsol-text-muted); } .jsol-repl-grid th[data-type="input"] { border-top: 3px solid var(--jsol-accent-input); } .jsol-repl-grid th[data-type="output"] { border-top: 3px solid var(--jsol-accent); } .jsol-repl-input { width: 100%; background: var(--jsol-input-bg); color: var(--jsol-input-text); border: 1px solid transparent; padding: 0.5rem; border-radius: 4px; font-family: monospace; font-size: 0.95rem; box-sizing: border-box; } .jsol-repl-input:focus { outline: 2px solid var(--jsol-accent); } .jsol-repl-output { font-family: monospace; font-size: 0.95rem; font-weight: bold; color: var(--jsol-success); } .jsol-repl-output[data-bool="false"] { color: var(--jsol-error); } .jsol-repl-output[data-error="true"] { background-color: var(--jsol-error-bg); color: var(--jsol-error-text); padding: 0.15rem 0.4rem; border-radius: 4px; border: 1px solid var(--jsol-error); font-size: 0.85rem; } .jsol-repl-details { margin-top: 1.5rem; background: var(--jsol-dim); border: 1px solid var(--jsol-border); border-radius: 6px; padding: 0.5rem 1rem; } .jsol-repl-summary { cursor: pointer; font-weight: 600; font-family: monospace; color: var(--jsol-accent); user-select: none; padding: 0.5rem 0; outline: none; } /* PATH: interpreter/css/repl.css */ /* REEMPLAZAR EXACTAMENTE EL BLOQUE ".jsol-repl-docs" EXISTENTE POR ESTAS LÍNEAS */ .jsol-repl-docs { margin-top: 0 !important; /* Eliminado el gap invisible */ padding: 2rem; background: var(--jsol-surface); border: 1px solid var(--jsol-border); border-top: none; /* Soldeo con la pestaña activa */ border-radius: 0 0 6px 6px; font-family: system-ui, -apple-system, sans-serif; color: var(--jsol-text); font-size: 1rem; line-height: 1.6; } .jsol-repl-docs h1, .jsol-repl-docs h2, .jsol-repl-docs h3, .jsol-repl-docs h4 { color: var(--jsol-text); font-weight: 700; margin-top: 1.5em; margin-bottom: 0.75em; } .jsol-repl-docs h1 { font-size: 2rem; border-bottom: 1px solid var(--jsol-border); padding-bottom: 0.3em; } .jsol-repl-docs h2 { font-size: 1.5rem; border-bottom: 1px solid var(--jsol-border); padding-bottom: 0.3em; } .jsol-repl-docs h3 { font-size: 1.25rem; } .jsol-repl-docs p { margin-bottom: 1em; } .jsol-repl-docs ul, .jsol-repl-docs ol { margin-bottom: 1em; padding-left: 2rem; } .jsol-repl-docs li { margin-bottom: 0.25em; } .jsol-repl-docs a { color: var(--jsol-accent); text-decoration: none; } .jsol-repl-docs a:hover { text-decoration: underline; } .jsol-repl-docs code { font-family: monospace; background: var(--jsol-dim); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } .jsol-repl-docs pre { background: var(--jsol-dim); padding: 1rem; border-radius: 6px; overflow-x: auto; margin-bottom: 1em; } .jsol-repl-docs pre code { background: transparent; padding: 0; font-size: 0.85em; } .jsol-repl-source-code { margin-top: 0.5rem; padding: 1rem; background: var(--jsol-surface); border: 1px solid var(--jsol-border); border-radius: 4px; white-space: pre-wrap; font-family: monospace; font-size: 0.85rem; color: var(--jsol-text); overflow-x: auto; } .jsol-repl-error-log { background: var(--jsol-error-bg); border: 1px solid var(--jsol-error); color: var(--jsol-error-text); padding: 1rem; margin-top: 1rem; font-family: monospace; white-space: pre-wrap; } /* Reglas de Adaptación Responsive (Mobile) */ @media (max-width: 768px) { .jsol-repl-container { flex-direction: column; /* Se delega la altura al contenedor padre o al body.jsol-repl-container */ } .jsol-repl-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--jsol-border); padding: 0.5rem 0.75rem; overflow-y: visible; flex-shrink: 0; } /* Especificidad estructural limpia (0,2,2) para ocultar las listas tanto en standalone como embebido, venciendo cascadas externas */ .jsol-repl-container .jsol-repl-sidebar h3, .jsol-repl-container .jsol-repl-sidebar ul.jsol-repl-desktop-list { display: none; } .jsol-repl-mobile-select { display: block; width: 100%; padding: 0.5rem; background: var(--jsol-surface); color: var(--jsol-text); border: 1px solid var(--jsol-border); border-radius: 4px; font-size: 0.85rem; box-sizing: border-box; } .jsol-repl-main { padding: 0.75rem; overflow-y: auto; flex: 1; min-height: 0; } .jsol-repl-table-wrap { overflow-x: auto; } } /* PATH: interpreter/css/repl.css */ /* AÑADIR EXCLUSIVAMENTE AL FINAL DEL ARCHIVO (DESPUÉS DE LAS REGLAS DE FLOATING ACTIONS) */ /* --- J0UI EXTENSIONS: TABS & TOOLBAR OVERRIDES FOR JSOL THEME --- */ .j0ui-tabs-row { display: flex; align-items: center; gap: 0.25rem; border-bottom: 1px solid var(--jsol-border); margin-top: 1rem; padding-bottom: 0; overflow-x: auto; background: transparent; /* Override j0ui default */ } .j0ui-tab-item { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--jsol-text-muted); padding: 0.5rem 0.85rem; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; height: auto; /* Override j0ui size */ } .j0ui-tab-item:hover { color: var(--jsol-text); background: var(--jsol-dim); } .j0ui-tab-item.j0ui-active { color: var(--jsol-accent); background: var(--jsol-surface); border-color: var(--jsol-border); border-bottom-color: var(--jsol-surface); } .j0ui-toolbar-spacer { flex: 1; } .j0ui-toolbar-btn { background: var(--jsol-surface); color: var(--jsol-text); border: 1px solid var(--jsol-border); border-radius: 4px; padding: 0.35rem 0.6rem; font-size: 0.75rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; height: auto; } .j0ui-toolbar-btn:hover { background: var(--jsol-dim-strong); color: #fff; }